<template>
    <div id="relationPannel" v-if="visible" class="relation-pannel">
        <div class="pannel-header">
            <button class="close-button" @click="closePannel">x</button>
        </div>
        <div class="content">
            <div v-for="value in relations" :key="value.type.id" class="relation-title">
                <div class="name">{{value.type.name}}</div>
                <div><el-color-picker v-model="defaultColor" @change="handleChange" /> </div>
            </div>
        </div>
        <!-- <table>
            <tbody>
                <tr v-for="value in relations" :key="value.type.id" class="relation-title">
                    <td>{{value.type.name}}</td>
                    <td>
                       <el-color-picker v-model="value.color" /> 
                    </td>
                </tr>
            </tbody>
        </table> -->
    </div>
</template>

<script>
import {Store} from '../../utils/store'
export default {
    name: 'CesiumRelationPannel',
    data() {
        return {
            defaultColor:'#CD2417'
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        relations: {
            type: Array
        }
    },
    mounted() {
    },
    methods: {
        closePannel() {
            this.$emit('signal_closeRelationPannel', false);
        },
        handleChange(val){
            console.log(Store,Store.oneGis(),456)
            let oneGis=Store.oneGis();
            oneGis.editRelationLins(val)
            // window.viewer.entities.values.forEach(entity => {
            //     if(entity.typeName =='line'){
            //         entity.polyline.material.color =window.Cesium.Color.fromCssColorString (val);
            //     }
            // });
        }
    }
}
</script>
<style lang="less" scoped>
    .relation-pannel{
        .content{
            padding: 10px 0;
            .relation-title{
                display: flex;
                align-items: center;
                justify-content: center;
                .name{
                    margin-right: 10px;
                }
            }
        }
    }
</style>
<style lang="less">
#relationPannel {
    position: absolute;
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
    z-index: 1;
    color: rgba(255, 255, 255, 1.0);
    width: 15rem;
    font-size: 14px;
    margin: 0.8rem;
    right: 0;

    .pannel-header {
        margin: 0 0;
        background-color: rgb(84, 84, 84);
        font-size: 18px;
        text-align: right;

        .close-button {
            background: none;
            right: 0;
            border: none;
            border-radius: 2px;
            font-weight: 700;
            padding: 0 5px;
            margin: 0;
            color: #edffff;
            font-size: inherit;
        }
    }
}
</style>
